<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            :headerTitle="headerTitle"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="true"
            :data="goodsList"
            @pullup="loadMore"
        >

            <img
                class="goods-type-img"
                :src="goodsTypeImg"
            />

            <!-- 共用商品列表组件 -->
            <common-good-list
                :goodsList="goodsList"
                :goodsType="0"
                :emptyTips="emptyTips"
                style="padding-top:.35rem"
            >
            </common-good-list>
            <!-- 共用商品列表组件 -->

        </common-scroll>
        <!-- 共用页面滚动组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
import CommonGoodList from '@/components/GoodList'
export default {
    name: 'Activity_1',
    components: {
        CommonHeader,
        CommonScroll,
        CommonGoodList
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '0',
            },
            headerTitle: '',
            goodsTypeImg: '',
            goodsList: [],
            emptyTips: '正在全力加载中...',
            nowPage: 1,
            totalPage: 1,
            isLoading: false
        }
    },
    mounted() {
        this.getGoodsType()
        this.getGoodsList()
    },
    methods: {
        getGoodsType() {
            let postData = this.qs.stringify({
                id: this.$route.query.goodsType
            })
            this.axios.post('/api/shelf/shelf_one.json', postData).then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.headerTitle = data.data.name
                    this.goodsTypeImg = data.data.imgs[0].title_img
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        getGoodsList() {
            this.isLoading = true
            let postData = this.qs.stringify({
                shelf_id: this.$route.query.goodsType,
                all: 0,
                page_size: 10,
                page: this.nowPage
            })
            this.axios
                .post('/api/shelf/shelf_goods.json', postData)
                .then(res => {
                    const data = res.data
                    if (data.status == 1) {
                        if (data.data.list.length == 0) {
                            this.emptyTips = '暂无商品'
                        }
                        this.goodsList = this.goodsList.concat(data.data.list)
                        this.totalPage = Math.ceil(
                            data.data.page_info.total / 10
                        )
                        this.nowPage++
                        this.isLoading = false
                    } else {
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
        },
        loadMore() {
            if (this.totalPage >= this.nowPage && this.isLoading == false) {
                this.getGoodsList()
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.goods-type-img
    width 100%
</style>


